<template>
    <div v-loading="loading" class="videoSzListBox" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
        <AddVideoSingleSz />
        <AddVideoMultiSz />
        <JustVideoSz />
        <ViewVideoInfo />
        <FissionVideoSz />
        <AddVideoSz />
        <FissionRecordVideo />
        <AddSchedTag :taglist="tag_list" ref="tagRef" />
        <LabelSettingDialog :taglist="tag_list" :ModuleName="ModuleName" ref="labelSettingDialog" />
        <!-- <EditShotSz @getDataList="getDataList" ref="shotRef" /> -->
        <EditVideoSz />
        <EditVideoBase ref="baseRef" :dataList="dataList" />
        <HasCenter ref="centerRef" :dataList="dataList" />
        <ViewVideoLog ref="log_ref" />
        <div class="com_box">
            <div class="sch_head flexbox flexcenter flexbetween">
                <div class="flexbox flexcenter">
                    <div class="sch_tab" @click="switchTab('/demandsz')">需求汇集</div>
                    <div class="sch_tab active">视频</div>
                    <div class="sch_tab" @click="switchTab('/pictureszlist')">图片</div>
                </div>
                <div class="flexbox flexcenter">
                    <el-radio-group v-model="queryInfo.date_defined" @change="getDataList(1)" size="small">
                        <el-radio-button :label="0">按周选</el-radio-button>
                        <el-radio-button :label="1">
                            <el-tooltip class="item" effect="dark" content="" placement="bottom">
                                <div slot="content" style="font-size:12;color:#fff;line-height:18px;width:350px">
                                    指定日期筛选将会根据素材上传的时间进行时间范围筛选,
                                    如选择2022/12/01-2022/12/31,将筛选出有在该日期范围内上传素材的需求。
                                </div>
                                <span>指定日期</span>
                            </el-tooltip>
                        </el-radio-button>
                    </el-radio-group>
                    <el-date-picker size="small" key="week" v-if="queryInfo.date_defined==0" v-model="yearData" @change="getData()" :picker-options="{firstDayOfWeek:1}" style="width:220px;margin-left:10px" :clearable='false' type="week" format="yyyy 年 MM 月 第 WW 周" placeholder="选择周">
                    </el-date-picker>
                    <el-date-picker key="mouth" v-if="queryInfo.date_defined==1" style="width:220px;margin-left:10px" value-format="yyyy-MM-dd" v-model="queryInfo.date" type="daterange" :picker-options="pickerOptions" clearable size="small" @change="getDataList(1)" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                    <el-button plain size="small" icon="el-icon-circle-plus-outline" style="margin-left:12px" @click="addVideoMultiSz">多需求</el-button>
                    <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" style="margin-left:12px" @click="addVideoSingleSz">单需求</el-button>
                </div>
            </div>
            <div class="sch_rank">
                <div class="flexbox flexcenter flexbetween">
                    <div class="flexbox flexcenter">
                        <el-radio-group v-model="queryInfo.onlyme" @change="getDataList(1)" size="mini" class="is_me">
                            <el-radio-button :label="0">全部</el-radio-button>
                            <el-radio-button :label="1" v-if="userInfo.id!=10000">分配给我的</el-radio-button>
                        </el-radio-group>
                        <div class="reset_btn" @click="resetFun">重置</div>
                        <div class="rank_line"></div>
                        <img src="../../assets/img/down_icon.svg" alt="" class="rank_down" :class="{'rank_up':!showrank}" @click="showrank = !showrank">
                    </div>
                    <div class="flexbox flexcenter">
                        <el-select v-model="queryInfo.field" placeholder="请选择" size="small" style="width:110px" class="cust_select">
                            <el-option label="截至日期" value="closing_date"></el-option>
                            <el-option label="按ID" value="id"></el-option>
                        </el-select>
                        <div class="icon_btn icon_btn_32" @click="sortFun('desc')" v-if="queryInfo.order==''|| queryInfo.order=='asc'"><img src="../../assets/img/rank_icon.svg" alt=""></div>
                        <div class="icon_btn icon_btn_32 rote_180" @click="sortFun('asc')" v-else><img src="../../assets/img/rank_icon.svg" alt=""></div>
                    </div>
                </div>
            </div>
            <div class="sch_hight flexbox" v-if="showrank">
                <div class="flexbox flexcenter max_width">
                    <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                        <div class="flexbox flexcenter drop_box drop_hover">
                            <span class="drop_text">剪辑</span>
                            <span class="drop_title">{{queryInfo.editor_uid.length>0?repeatFind(queryInfo.editor_uid,optimiList,'id','nickname'):'全部'}}</span>
                            <span class="el-icon-caret-bottom"></span>
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <el-input v-model="centreQuery" clearable placeholder="请输入内容" prefix-icon="el-icon-search" style="width:180px" size="small" class="dropdown_input"></el-input>
                            <div class="dropdown_hascheck flexbox flexcenter">
                                <span class="hascheck_num" :class="{'hascheck_num_color':queryInfo.editor_uid.length>0}">已选 {{queryInfo.editor_uid.length}} 项</span>
                                <div class="rank_line" style="margin:0 10px"></div>
                                <el-link type="primary" :underline="false" @click="clearQuery('editor_uid',2)" v-if="queryInfo.editor_uid.length>0">清除已选</el-link>
                            </div>
                            <el-checkbox-group v-model="queryInfo.editor_uid" class="check_style" @change="getDataList(1)">
                                <el-checkbox :label="item.id" v-for="item in filteredData(centreQuery,optimiList,'nickname')" :key='item.id'>
                                    <span class="el_check_title">{{item.nickname}}</span>
                                    <span class="el-icon-check el_check_icon"></span>
                                </el-checkbox>
                            </el-checkbox-group>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <div class="rank_line"></div>
                    <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                        <div class="flexbox flexcenter drop_box drop_hover">
                            <span class="drop_text">截止日期</span>
                            <span class="drop_title">{{queryInfo.closing_date.length>0?repeatFind(queryInfo.closing_date,dataList,'id','nickname'):'全部'}}</span>
                            <span class="el-icon-caret-bottom"></span>
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <div class="dropdown_hascheck flexbox flexcenter">
                                <span class="hascheck_num" :class="{'hascheck_num_color':queryInfo.closing_date.length>0}">已选 {{queryInfo.closing_date.length}} 项</span>
                                <div class="rank_line" style="margin:0 10px"></div>
                                <el-link type="primary" :underline="false" @click="clearQuery('closing_date',2)" v-if="queryInfo.closing_date.length>0">清除已选</el-link>
                            </div>
                            <el-checkbox-group v-model="queryInfo.closing_date" class="check_style" @change="getDataList(1)">
                                <el-checkbox :label="item.id" v-for="item in filteredData('',dataList,'nickname')" :key='item.id'>
                                    <span class="el_check_title">{{item.nickname}}</span>
                                    <span class="el-icon-check el_check_icon"></span>
                                </el-checkbox>
                            </el-checkbox-group>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <div class="rank_line"></div>
                    <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                        <div class="flexbox flexcenter drop_box drop_hover">
                            <span class="drop_text">裂变类型</span>
                            <span class="drop_title">{{queryInfo.fission_type.length>0?repeatFind(queryInfo.fission_type,fissionList,'id','nickname'):'全部'}}</span>
                            <span class="el-icon-caret-bottom"></span>
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <div class="dropdown_hascheck flexbox flexcenter">
                                <span class="hascheck_num" :class="{'hascheck_num_color':queryInfo.fission_type.length>0}">已选 {{queryInfo.fission_type.length}} 项</span>
                                <div class="rank_line" style="margin:0 10px"></div>
                                <el-link type="primary" :underline="false" @click="clearQuery('fission_type',2)" v-if="queryInfo.fission_type.length>0">清除已选</el-link>
                            </div>
                            <el-checkbox-group v-model="queryInfo.fission_type" class="check_style" @change="getDataList(1)">
                                <el-checkbox :label="item.id" v-for="item in filteredData('',fissionList,'nickname')" :key='item.id'>
                                    <span class="el_check_title">{{item.nickname}}</span>
                                    <span class="el-icon-check el_check_icon"></span>
                                </el-checkbox>
                            </el-checkbox-group>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <div class="rank_line"></div>
                    <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                        <div class="flexbox flexcenter drop_box drop_hover">
                            <span class="drop_text">品牌</span>
                            <span class="drop_title">{{queryInfo.brand_name?queryInfo.brand_name:'全部'}}</span>
                            <span class="el-icon-caret-bottom"></span>
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <el-input v-model="queryInfo.brand_name" @change="getDataList(1)" clearable placeholder="请输入品牌名称" prefix-icon="el-icon-search" style="width:180px" size="small" class="dropdown_input"></el-input>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <div class="rank_line"></div>
                    <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                        <div class="flexbox flexcenter drop_box drop_hover">
                            <span class="drop_text">产品</span>
                            <span class="drop_title">{{queryInfo.product_name?queryInfo.product_name:'全部'}}</span>
                            <span class="el-icon-caret-bottom"></span>
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <el-input v-model="queryInfo.product_name" @change="getDataList(1)" clearable placeholder="请输入产品名称" prefix-icon="el-icon-search" style="width:180px" size="small" class="dropdown_input"></el-input>
                        </el-dropdown-menu>
                    </el-dropdown>

                    <template v-if="addrank[0].check">
                        <div class="rank_line"></div>
                        <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                            <div class="flexbox flexcenter drop_box drop_hover">
                                <span class="close_drop el-icon-error" @click.stop="deletRank(0,'business_scene',3)"></span>
                                <span class="drop_text">业务场景</span>
                                <span class="drop_title">{{yewuValue.length>0?repeatFind(yewuValue,yewuList,'id','nickname'):'全部'}}</span>
                                <span class="el-icon-caret-bottom"></span>
                            </div>
                            <el-dropdown-menu slot="dropdown">
                                <div class="dropdown_hascheck flexbox flexcenter">
                                    <span class="hascheck_num" :class="{'hascheck_num_color':yewuValue.length>0}">已选 {{yewuValue.length}} 项</span>
                                    <div class="rank_line" style="margin:0 10px"></div>
                                    <el-link type="primary" :underline="false" @click="clearChannl()" v-if="yewuValue.length>0">清除已选</el-link>
                                </div>
                                <el-checkbox-group v-model="yewuValue" class="check_style" @change="selectYewu()">
                                    <el-checkbox :label="item.id" v-for="item in yewuList" :key='item.id'>
                                        <span class="el_check_title">{{item.nickname}}</span>
                                        <span class="el-icon-check el_check_icon"></span>
                                    </el-checkbox>
                                </el-checkbox-group>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>

                    <template v-if="addrank[1].check">
                        <div class="rank_line"></div>
                        <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                            <div class="flexbox flexcenter drop_box drop_hover">
                                <span class="close_drop el-icon-error" @click.stop="deletRank(1,'verify_status',2)"></span>
                                <span class="drop_text">审核状态</span>
                                <span class="drop_title">{{queryInfo.verify_status.length>0?repeatFind(queryInfo.verify_status,verifyList,'id','nickname'):'全部'}}</span>
                                <span class="el-icon-caret-bottom"></span>
                            </div>
                            <el-dropdown-menu slot="dropdown">
                                <div class="dropdown_hascheck flexbox flexcenter">
                                    <span class="hascheck_num" :class="{'hascheck_num_color':queryInfo.verify_status.length>0}">已选 {{queryInfo.verify_status.length}} 项</span>
                                    <div class="rank_line" style="margin:0 10px"></div>
                                    <el-link type="primary" :underline="false" @click="clearQuery('verify_status',2)" v-if="queryInfo.verify_status.length>0">清除已选</el-link>
                                </div>
                                <el-checkbox-group v-model="queryInfo.verify_status" class="check_style" @change="getDataList(1)">
                                    <el-checkbox :label="item.id" v-for="item in filteredData('',verifyList,'nickname')" :key='item.id'>
                                        <span class="el_check_title">{{item.nickname}}</span>
                                        <span class="el-icon-check el_check_icon"></span>
                                    </el-checkbox>
                                </el-checkbox-group>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>

                    <template v-if="addrank[2].check">
                        <div class="rank_line"></div>
                        <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                            <div class="flexbox flexcenter drop_box drop_hover">
                                <span class="close_drop el-icon-error" @click.stop="deletRank(2,'channel',2)"></span>
                                <span class="drop_text">平台</span>
                                <span class="drop_title">{{queryInfo.channel.length>0?repeatFind(queryInfo.channel,channelList,'id','nickname'):'全部'}}</span>
                                <span class="el-icon-caret-bottom"></span>
                            </div>
                            <el-dropdown-menu slot="dropdown">
                                <div class="dropdown_hascheck flexbox flexcenter">
                                    <span class="hascheck_num" :class="{'hascheck_num_color':queryInfo.channel.length>0}">已选 {{queryInfo.channel.length}} 项</span>
                                    <div class="rank_line" style="margin:0 10px"></div>
                                    <el-link type="primary" :underline="false" @click="clearQuery('channel',2)" v-if="queryInfo.channel.length>0">清除已选</el-link>
                                </div>
                                <el-checkbox-group v-model="queryInfo.channel" class="check_style" @change="getDataList(1)">
                                    <el-checkbox :label="item.id" v-for="item in filteredData('',channelList,'nickname')" :key='item.id'>
                                        <span class="el_check_title">{{item.nickname}}</span>
                                        <span class="el-icon-check el_check_icon"></span>
                                    </el-checkbox>
                                </el-checkbox-group>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>

                    <template v-if="addrank[3].check">
                        <div class="rank_line"></div>
                        <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                            <div class="flexbox flexcenter drop_box drop_hover">
                                <span class="close_drop el-icon-error" @click.stop="deletRank(3,'centre_name',1)"></span>
                                <span class="drop_text">核心创意人</span>
                                <span class="drop_title">{{queryInfo.centre_name?queryInfo.centre_name:'全部'}}</span>
                                <span class="el-icon-caret-bottom"></span>
                            </div>
                            <el-dropdown-menu slot="dropdown">
                                <el-input v-model="queryInfo.centre_name" @change="getDataList(1)" clearable placeholder="请输入核心创意人" prefix-icon="el-icon-search" style="width:180px" size="small" class="dropdown_input"></el-input>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>

                    <template v-if="addrank[4].check">
                        <div class="rank_line"></div>
                        <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                            <div class="flexbox flexcenter drop_box drop_hover">
                                <span class="close_drop el-icon-error" @click.stop="deletRank(4,'material_finish',1)"></span>
                                <span class="drop_text">上传状态</span>
                                <span class="drop_title">{{queryInfo.material_finish!==''?repeatSinge(finishlList,queryInfo.material_finish,'id','nickname'):'全部'}}</span>
                                <span class="el-icon-caret-bottom"></span>
                            </div>
                            <el-dropdown-menu slot="dropdown">
                                <div class="dropdown_hascheck flexbox flexcenter">
                                    <span class="hascheck_num" :class="{'hascheck_num_color':queryInfo.material_finish!==''}">已选 {{queryInfo.material_finish!==''?'1':'0'}} 项</span>
                                    <div class="rank_line" style="margin:0 10px"></div>
                                    <el-link type="primary" :underline="false" @click="clearQuery('material_finish',1)" v-if="queryInfo.material_finish!==''">清除已选</el-link>
                                </div>
                                <el-radio-group v-model="queryInfo.material_finish" class="check_style" @change="getDataList(1)">
                                    <el-radio :label="item.id" v-for="(item,index) in finishlList" :key="index">
                                        <span class="el_check_title">{{item.nickname}}</span>
                                        <span class="el-icon-check el_check_icon"></span>
                                    </el-radio>
                                </el-radio-group>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>

                    <template v-if="addrank[5].check">
                        <div class="rank_line"></div>
                        <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                            <div class="flexbox flexcenter drop_box drop_hover">
                                <span class="close_drop el-icon-error" @click.stop="deletRank(5,'tag',2)"></span>
                                <span class="drop_text">标签</span>
                                <span class="drop_title">{{queryInfo.tag.length>0?repeatFind(queryInfo.tag,tag_list,'id','name'):'全部'}}</span>
                                <span class="el-icon-caret-bottom"></span>
                            </div>
                            <el-dropdown-menu slot="dropdown">
                                <div class="dropdown_hascheck flexbox flexcenter">
                                    <span class="hascheck_num" :class="{'hascheck_num_color':queryInfo.tag.length>0}">已选 {{queryInfo.tag.length}} 项</span>
                                    <div class="rank_line" style="margin:0 10px"></div>
                                    <el-link type="primary" :underline="false" @click="clearQuery('tag',2)" v-if="queryInfo.tag.length>0">清除已选</el-link>
                                </div>
                                <el-checkbox-group v-model="queryInfo.tag" class="check_style" @change="getDataList(1)">
                                    <el-checkbox :label="item.id" v-for="item in filteredData('',tag_list,'name')" :key='item.id'>
                                        <span class="el_check_title">{{item.name}}</span>
                                        <span class="el-icon-check el_check_icon"></span>
                                    </el-checkbox>
                                </el-checkbox-group>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>

                    <template v-if="addrank[6].check">
                        <div class="rank_line"></div>
                        <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                            <div class="flexbox flexcenter drop_box drop_hover">
                                <span class="close_drop el-icon-error" @click.stop="deletRank(6,'status',1)"></span>
                                <span class="drop_text">废弃状态</span>
                                <span class="drop_title">{{queryInfo.status!==''?repeatSinge(feiqiList,queryInfo.status,'id','nickname'):'全部'}}</span>
                                <span class="el-icon-caret-bottom"></span>
                            </div>
                            <el-dropdown-menu slot="dropdown">
                                <div class="dropdown_hascheck flexbox flexcenter">
                                    <span class="hascheck_num" :class="{'hascheck_num_color':queryInfo.status!==''}">已选 {{queryInfo.status!==''?'1':'0'}} 项</span>
                                    <div class="rank_line" style="margin:0 10px"></div>
                                    <el-link type="primary" :underline="false" @click="clearQuery('status',1)" v-if="queryInfo.status!==''">清除已选</el-link>
                                </div>
                                <el-radio-group v-model="queryInfo.status" class="check_style" @change="getDataList(1)">
                                    <el-radio :label="item.id" v-for="(item,index) in feiqiList" :key="index">
                                        <span class="el_check_title">{{item.nickname}}</span>
                                        <span class="el-icon-check el_check_icon"></span>
                                    </el-radio>
                                </el-radio-group>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>

                    <template v-if="addrank[7].check">
                        <div class="rank_line"></div>
                        <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                            <div class="flexbox flexcenter drop_box drop_hover">
                                <span class="close_drop el-icon-error" @click.stop="deletRank(7,'quality_status',1)"></span>
                                <span class="drop_text">预审状态</span>
                                <span class="drop_title">{{queryInfo.quality_status!==''?repeatSinge(yushenList,queryInfo.quality_status,'id','nickname'):'全部'}}</span>
                                <span class="el-icon-caret-bottom"></span>
                            </div>
                            <el-dropdown-menu slot="dropdown">
                                <div class="dropdown_hascheck flexbox flexcenter">
                                    <span class="hascheck_num" :class="{'hascheck_num_color':queryInfo.quality_status!==''}">已选 {{queryInfo.quality_status!==''?'1':'0'}} 项</span>
                                    <div class="rank_line" style="margin:0 10px"></div>
                                    <el-link type="primary" :underline="false" @click="clearQuery('quality_status',1)" v-if="queryInfo.quality_status!==''">清除已选</el-link>
                                </div>
                                <el-radio-group v-model="queryInfo.quality_status" class="check_style" @change="getDataList(1)">
                                    <el-radio :label="item.id" v-for="(item,index) in yushenList" :key="index">
                                        <span class="el_check_title">{{item.nickname}}</span>
                                        <span class="el-icon-check el_check_icon"></span>
                                    </el-radio>
                                </el-radio-group>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                    <template v-if="addrank[8].check">
                         <div class="rank_line"></div>
                        <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                            <div class="flexbox flexcenter drop_box drop_hover">
                                <span class="close_drop el-icon-error" @click.stop="deletRank(8,'sync_status',1)"></span>
                                <span class="drop_text">同步状态</span>
                                <span class="drop_title">{{queryInfo.sync_status!==''?repeatSinge(tongbuList,queryInfo.sync_status,'id','nickname'):'全部'}}</span>
                                <span class="el-icon-caret-bottom"></span>
                            </div>
                            <el-dropdown-menu slot="dropdown">
                                <div class="dropdown_hascheck flexbox flexcenter">
                                    <span class="hascheck_num" :class="{'hascheck_num_color':queryInfo.sync_status!==''}">已选 {{queryInfo.sync_status!==''?'1':'0'}} 项</span>
                                    <div class="rank_line" style="margin:0 10px"></div>
                                    <el-link type="primary" :underline="false" @click="clearQuery('sync_status',1)" v-if="queryInfo.sync_status!==''">清除已选</el-link>
                                </div>
                                <el-radio-group v-model="queryInfo.sync_status" class="check_style" @change="getDataList(1)">
                                    <el-radio :label="item.id" v-for="(item,index) in tongbuList" :key="index">
                                        <span class="el_check_title">{{item.nickname}}</span>
                                        <span class="el-icon-check el_check_icon"></span>
                                    </el-radio>
                                </el-radio-group>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                    <div class="rank_line"></div>
                    <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                        <div class="flexbox flexcenter drop_box drop_hover">
                            <span class="drop_text">+ 筛选</span>
                            <span class="el-icon-caret-bottom"></span>
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <ul class="demand_rank">
                                <li v-for="(item,index) in addrank" :key="index">
                                    <el-checkbox v-model="item.check" @change="changeRank(item,index)">{{item.name}}</el-checkbox>
                                </li>
                            </ul>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <template v-if="queryInfo.id.length>0">
                        <div class="rank_line"></div>
                        <el-tag type="info" size="small" closable @close="tagClose()">
                            原需求：{{queryInfo.id.toString()}}
                        </el-tag>
                    </template>

                </div>
                <div class="input_width">
                    <el-input style="width:216px;margin-left:5px" clearable size="small" placeholder="素材名称，ID" suffix-icon="el-icon-search" @change="getDataList(1)" v-model="queryInfo.query">
                    </el-input>
                </div>
            </div>
        </div>
        <div class="com_box" style="margin-top:12px">
            <div class="table_box">
                <div class="flexbox flexbetween flexcenter" style="margin-bottom:16px">
                    <div class="has_check flexbox flexcenter flexbetween" v-if="hasSelect.length > 0">
                        <div class="has_ch_left">
                            <span class="has_text">已选中{{ hasSelect.length }}项</span>
                            <span class="has_btn" @click="editCenter">修改基础信息</span>
                            <span class="has_btn" @click="deletVideoSz(hasSelect.map(item=>{return item.id}))">作废</span>
                        </div>
                        <div class="close_check" @click="closeCheck">
                            <img src="../../assets/img/close_check.svg" alt="">
                        </div>
                    </div>
                    <template v-else>
                        <span class="font_16 color_01">需求列表</span>
                        <div class="flexbox flexcenter">
                            <span class="font_14 color_01" style="margin-right:10px">已完成</span>
                            <el-progress :percentage="process" style="width:120px"></el-progress>
                        </div>
                    </template>
                </div>
                <el-table :data="tableData" class="com_table" ref="multipleTable" height="calc(100vh - 389px)" :row-key="(row) => { return row.id }" @selection-change="handleSelectionChange">
                    <div slot="empty" class="flexbox flexcenter flexcolumn flexjust" style="height:300px">
                        <img src="../../assets/img/null_icon.svg" alt="">
                        <div class="font_13 color_03">暂无数据</div>
                    </div>
                    <el-table-column type="selection" width="55" align="center" :reserve-selection="true" :selectable='selectEnable'>
                    </el-table-column>
                    <el-table-column prop="id" label="ID" min-width="120">
                    </el-table-column>
                    <el-table-column prop="" label="品牌/产品" width="130">
                        <template slot-scope="scope">
                            <div class="table_brand">{{scope.row.brand_name}}</div>
                            <div class="table_product">{{scope.row.product_name}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="description" label="需求信息" width="100">
                        <template slot-scope="scope">
                            <div class="icon_btn icon_btn_32 flexbox flexcenter" @click="viewVideoInfo(scope.row.description)" v-if="scope.row.description"><img src="../../assets/img/file_icon.svg" alt=""></div>
                            <div class="icon_btn icon_btn_32 flexbox flexcenter" v-else><img src="../../assets/img/file_icon2.svg" alt=""></div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="photographer_uid" label="拍摄人" min-width="170">
                        <template slot-scope="scope">
                            <div class="flexbox flexcenter remark_hover">
                                <template v-if="scope.row.photographer_uid.length>0">
                                    {{scope.row.photographer_uid.map((item=>{return item.nickname})).toString()}}
                                </template>
                                <template v-else>
                                    --
                                </template>
                                <!-- <span class="icon_btn flexbox flexcenter flexjust" v-if="scope.row.sync_status !=1">
                                    <img src="../../assets/img/edit_icon2.svg" alt="" @click="editShotSz(scope.row)">
                                </span> -->
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="remark" label="备注" min-width="250">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.remark"  type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="" @blur="editRemark(scope.row,scope.$index)" v-textarea size="mini" v-if="scope.row.remarkshow"></el-input>
                            <div class="flexbox flexcenter remark_hover" v-else>{{scope.row.remark?scope.row.remark:'--'}}<span class="icon_btn flexbox flexcenter flexjust" v-if="scope.row.sync_status!=1"><img src="../../assets/img/edit_icon2.svg" alt="" @click="showRemark(scope.$index)"></span></div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="wait_num" label="待用分镜素材" min-width="150">
                        <template slot-scope="scope">
                            <div class="flexbox flexcenter vide_num" @click="openVideoDialog(scope.row,'wait')">
                                {{ scope.row.wait_num }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="already_num" label="应用分镜素材" min-width="150">
                        <template slot-scope="scope">
                            <div class="flexbox flexcenter vide_num" @click="openVideoDialog(scope.row,'already')">
                                {{ scope.row.already_num }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="material" label="成片文件" min-width="150">
                        <template slot-scope="scope">
                            <div class="flexbox flexcenter">
                                <div v-for="(item,index) in scope.row.material" :key="index" class="flexbox flexcenter">
                                    <!-- <el-popover placement="left" title="" width="280" trigger="hover" open-delay="500" close-delay="100" content="" @show='showVideo(item.url)' @hide='hideVideo'>
                                        <div style="width:100%;height:500px">
                                            <video v-if="video_status" id="media" :src="vd_url" muted autoplay preload controls width="100%" height="100%"></video>
                                        </div>
                                        <div class="add_sche flexbox flexcenter" slot="reference" @click="videoDetailsSz(scope.row.id)">
                                            <img :src="item.url+'&x-oss-process=video/snapshot,t_0,f_jpg'" alt="" style="width:32px;height:32px">
                                        </div>
                                    </el-popover> -->
                                    <div class="add_sche flexbox flexcenter" slot="reference" @click="videoDetailsSz(scope.row.id)">
                                        <img :src="item.url+'&x-oss-process=video/snapshot,t_0,f_jpg'" alt="" style="width:32px;height:32px">
                                    </div>
                                </div>
                                <div class="add_sche flexbox flexcenter" @click="eidtVideoSz(scope.row)"  v-if="scope.row.sync_status!=1"><img src="../../assets/img/add_sch.svg" alt=""></div>
                                <el-tooltip content="复制链接" placement="top" v-if="scope.row.material.length>0" >
                                    <el-link :underline="false" icon="el-icon-document-copy" style="margin-right:10px" @click="copy(item.url)"></el-link>
                                </el-tooltip>
                                    <!-- v-if="scope.row.sync_status!=1" -->
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="remark" label="素材标签" min-width="270">
                        <template slot-scope="scope">
                            <div class="flexbox flexcenter remark_hover">
                                <template v-if="scope.row.tag.length>0">
                                    <div class="tag_context">{{scope.row.tag.map((item=>{return item.name})).join('/')}}</div>
                                </template>
                                <template v-else>
                                    --
                                </template>
                                <span class="icon_btn flexbox flexcenter flexjust">
                                    <img src="../../assets/img/edit_icon2.svg" alt="" @click="addMaterialTag(scope.row,1)">
                                </span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="create_type" label="创作类型" width="100">
                        <template slot-scope="scope">
                            {{scope.row.create_type==0?"默认":"原创"}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="fission_type" label="裂变类型" width="100">
                        <template slot-scope="scope">
                            <el-link v-if="scope.row.fission_type==1" @click="fissionRecordVideo(scope.row)">修改</el-link>
                            <el-link v-else-if="scope.row.fission_type==2" @click="fissionRecordVideo(scope.row)">调整</el-link>
                            <span v-else>--</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="business_scene" label="业务场景" width="170">
                        <template slot-scope="scope">
                            <SceneModel :sceneTyle="scope.row" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="closing_date" label="截止日期" width="130">
                        <template slot-scope="scope">
                            <DaysModel :daysTyle="scope.row" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="verify_status" label="审核状态" width="100">
                        <template slot-scope="scope">
                            <div class="flexbox flexcenter" v-if="scope.row.verify_status==0">
                                <span class="text_gray">暂无</span>
                            </div>
                            <template v-else>
                                <el-popover placement="top" trigger="hover">
                                    <div class="tips_content" v-html="scope.row.reject_reason" @click="selectPicture($event)">

                                    </div>
                                    <div class="flexbox flexcenter" slot="reference">
                                        <span class="text_red" style="margin-right:5px">卡审</span>
                                        <img src="../../assets/img/reson_icon.svg" alt="">
                                    </div>
                                </el-popover>
                            </template>
                        </template>
                    </el-table-column>
                    <el-table-column prop="quality_status" label="预审状态" width="100">
                        <template slot-scope="scope">
                            <div class="flexbox flexcenter" v-if="scope.row.quality_status==0">
                                <span class="text_gray">暂无</span>
                            </div>
                            <template v-else>
                                <el-popover placement="top" trigger="hover">
                                    <div class="tips_content" v-html="scope.row.quality_reason">

                                    </div>
                                    <div class="flexbox flexcenter" slot="reference">
                                        <span class="text_red" style="margin-right:5px">拒审</span>
                                        <img src="../../assets/img/reson_icon.svg" alt="">
                                    </div>
                                </el-popover>
                            </template>
                        </template>
                    </el-table-column>
                    <el-table-column prop="centre_name" label="核心创意人" width="130" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="editor_name" label="剪辑" width="100" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="material_name" label="素材名称" min-width="200" show-overflow-tooltip>
                        <template slot-scope="scope" slot="header">
                            <div class="flexbox flexcenter">
                                素材名称
                                <el-tooltip content="JC_品牌_产品_核心创意人_剪辑_渠道类型_唯一码_上传日期" placement="top">
                                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-left:5px">
                                        <circle cx="10" cy="10" r="8" fill="#CFD4DD" />
                                        <path d="M7.4 8.8544V8.9544H7.5H8.74454H8.84454V8.8544C8.84454 8.40304 8.93037 8.06505 9.09807 7.83666L9.09814 7.83671L9.10039 7.83337C9.28308 7.56236 9.58383 7.42692 10.0437 7.42692C10.3968 7.42692 10.6621 7.52052 10.8451 7.70414C11.0208 7.89135 11.1227 8.15083 11.1227 8.49176C11.1227 8.7406 11.0343 8.98223 10.8511 9.20803L10.7251 9.3559C10.3714 9.67381 10.0866 9.94944 9.87171 10.1838C9.65777 10.4171 9.50782 10.6151 9.43008 10.7769C9.26797 11.0923 9.20131 11.4719 9.20131 11.8984V12.0522V12.1522H9.30131H10.5568H10.6568V12.0522V11.8984C10.6568 11.6496 10.708 11.4341 10.8101 11.2286C10.9023 11.043 11.0356 10.8671 11.2215 10.7112L11.2215 10.7113L11.2233 10.7097C11.746 10.2493 12.0676 9.9484 12.1706 9.83314L12.1709 9.8334L12.1763 9.82623C12.4532 9.4545 12.6 8.98201 12.6 8.41484C12.6 7.72088 12.3729 7.16437 11.9116 6.75784C11.452 6.34177 10.8473 6.15 10.1201 6.15C9.29233 6.15 8.63194 6.38707 8.13991 6.8706C7.63532 7.35566 7.4 8.02186 7.4 8.8544ZM10.584 13.1633L10.5841 13.1632L10.5816 13.1609C10.3975 12.9879 10.1648 12.903 9.90175 12.903C9.63738 12.903 9.41603 12.9888 9.23284 13.1609C9.04613 13.3363 8.96114 13.5619 8.96114 13.8271C8.96114 14.0924 9.04613 14.318 9.23284 14.4934C9.41353 14.6632 9.634 14.7623 9.90175 14.7623C10.1661 14.7623 10.3875 14.6765 10.5707 14.5044C10.756 14.3303 10.8533 14.0945 10.8533 13.8271C10.8533 13.5588 10.7553 13.3357 10.584 13.1633Z" fill="white" stroke="white" stroke-width="0.2" />
                                    </svg>
                                    <!-- <i class="el-icon-question" style="margin-left:5px;color:#616C85"></i> -->
                                </el-tooltip>
                            </div>
                        </template>
                        <template slot-scope="scope">
                            <template v-if="scope.row.material_name">
                                <el-tooltip content="复制" placement="top">
                                    <el-link :underline="false" icon="el-icon-document-copy" @click="copy(scope.row.material_name)"></el-link>
                                </el-tooltip>
                                {{scope.row.material_name}}
                            </template>
                            <template v-else>
                                --
                            </template>
                        </template>
                    </el-table-column>
                    <el-table-column prop="product_num" label="操作" width="180" align="center" fixed="right">
                        <template slot-scope="scope">
                            <template v-if="scope.row.status==1">
                                <div v-if="scope.row.sync_status==1" class="flexbox flexcenter">
                                    <template>
                                        <el-tooltip class="item" effect="dark" content="日志" placement="top">
                                            <el-button type="primary" circle size="small" class="icon_btn" @click="viewLog(scope.row)">
                                                <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <path d="M11 18.4823L4.78571 18.4824C4.35178 18.4824 4 18.1029 4 17.6348L4 4.34728C4 3.87914 4.35178 3.49965 4.78572 3.49965L15.2143 3.49966C15.6482 3.49966 16 3.87914 16 4.34728L16 11.4998" stroke="#4475FF" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                                                    <path d="M7 7.5H13" stroke="#4475FF" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                                                    <path d="M7 10.5H10.5" stroke="#4475FF" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                                                    <path opacity="0.5" d="M12 15L14 13.5M14 13.5L16 15M14 13.5L14 18.5" stroke="#4475FF" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                                                </svg>
                                            </el-button>
                                        </el-tooltip>
                                    </template>
                                    <template v-if="scope.row.fission_type !=0">
                                        <el-tooltip class="item" effect="dark" content="已同步素材库" placement="top">
                                            <el-button type="primary" circle size="small" class="icon_btn">
                                                <svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <circle cx="16" cy="16.5" r="16" fill="#A5B1D1" fill-opacity="0.08" />
                                                    <path d="M12 16.5L12.5 17M23 14L16.3333 20.6667L15.9167 20.25" stroke="#B4B7BD" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                                                    <path d="M9.33331 16.9998L12.6666 20.3332L19.3333 13.6665" stroke="#B4B7BD" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                                                </svg>
                                            </el-button>
                                        </el-tooltip>
                                    </template>
                                    <template v-else>
                                        <el-tooltip class="item" effect="dark" content="裂变" placement="top">
                                            <el-button type="primary" circle size="small" class="icon_btn" @click="fissionVideoSz(scope.row)">
                                                <svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <circle cx="16" cy="16.5" r="16" fill="#A5B1D1" fill-opacity="0.08" />
                                                    <path opacity="0.5" d="M23.7 16.5C23.7 17.715 22.715 18.7 21.5 18.7C20.285 18.7 19.3 17.715 19.3 16.5C19.3 15.285 20.285 14.3 21.5 14.3C22.715 14.3 23.7 15.285 23.7 16.5Z" stroke="#4475FF" stroke-width="1.6" />
                                                    <path opacity="0.5" d="M12.7 16.5C12.7 17.715 11.715 18.7 10.5 18.7C9.28497 18.7 8.3 17.715 8.3 16.5C8.3 15.285 9.28497 14.3 10.5 14.3C11.715 14.3 12.7 15.285 12.7 16.5Z" stroke="#4475FF" stroke-width="1.6" />
                                                    <path d="M19.2 16.5C19.2 18.2673 17.7673 19.7 16 19.7C14.2327 19.7 12.8 18.2673 12.8 16.5C12.8 14.7327 14.2327 13.3 16 13.3C17.7673 13.3 19.2 14.7327 19.2 16.5Z" stroke="#4475FF" stroke-width="1.6" />
                                                </svg>
                                            </el-button>
                                        </el-tooltip>
                                    </template>
                                    <span class="font_14 color_02 ml_12">已同步</span>
                                </div>
                                <template v-else>
                                    <el-tooltip class="item" effect="dark" content="上传视频" placement="top">
                                        <el-button type="primary" circle size="small" class="icon_btn" @click="eidtVideoSz(scope.row)">
                                            <svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <circle cx="16" cy="16.5" r="16" fill="#A5B1D1" fill-opacity="0.08" />
                                                <path fill-rule="evenodd" clip-rule="evenodd" d="M11.0838 13.9076C11.144 13.9925 11.1894 14.09 11.2153 14.1973C11.3243 14.6494 11.0462 15.1043 10.5941 15.2134C8.93253 15.6141 7.68421 17.1353 7.68421 18.9627C7.68421 21.1019 9.39108 22.8158 11.4718 22.8158C11.8309 22.8158 12.1769 22.7652 12.5042 22.6711C12.9511 22.5426 13.4177 22.8008 13.5462 23.2478C13.6747 23.6948 13.4165 24.1613 12.9695 24.2898C12.4926 24.4269 11.9899 24.5 11.4718 24.5C8.43868 24.5 6 22.0096 6 18.9627C6 16.6533 7.39867 14.6671 9.39588 13.838C9.69808 10.7931 12.4549 8.5 15.6842 8.5C18.9135 8.5 21.6703 10.7931 21.9725 13.8379C23.9698 14.6671 25.3684 16.6533 25.3684 18.9627C25.3684 22.0096 22.9298 24.5 19.8966 24.5C19.3785 24.5 18.8758 24.4269 18.3989 24.2898C17.9519 24.1613 17.6938 23.6948 17.8223 23.2478C17.9508 22.8008 18.4173 22.5426 18.8643 22.6711C19.1915 22.7652 19.5375 22.8158 19.8966 22.8158C21.9774 22.8158 23.6842 21.1019 23.6842 18.9627C23.6842 17.1353 22.4359 15.6141 20.7743 15.2134C20.3222 15.1043 20.0441 14.6494 20.1532 14.1973C20.179 14.09 20.2244 13.9925 20.2846 13.9076C20.021 11.8592 18.1166 10.1842 15.6842 10.1842C13.2519 10.1842 11.3474 11.8592 11.0838 13.9076Z" fill="#4475FF" />
                                                <path fill-rule="evenodd" clip-rule="evenodd" d="M16.2332 14.1726C15.918 13.9062 15.4561 13.9074 15.1424 14.1756L12.2364 16.6594C11.8828 16.9616 11.8412 17.4932 12.1434 17.8467C12.4456 18.2003 12.9771 18.2419 13.3307 17.9397L14.8888 16.6079V21.9736C14.8888 22.4387 15.2658 22.8157 15.7309 22.8157C16.196 22.8157 16.573 22.4387 16.573 21.9736V16.6652L18.1346 17.9852C18.4898 18.2854 19.0212 18.2409 19.3214 17.8857C19.6216 17.5305 19.5771 16.9992 19.2219 16.6989L16.2332 14.1726Z" fill="#96B1FD" />
                                            </svg>
                                        </el-button>
                                    </el-tooltip>
                                    <el-tooltip class="item" effect="dark" content="同步素材库" placement="top">
                                        <el-button type="primary" circle size="small" class="icon_btn" disabled v-if="scope.row.material.length==0 || scope.row.sync_status==1">
                                            <svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <circle cx="16" cy="16.5" r="16" fill="#A5B1D1" fill-opacity="0.08" />
                                                <path d="M22 14.5H11L15 10.5" stroke="#B4B7BD" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                                                <path opacity="0.5" d="M11 17.5H22L18 21.5" stroke="#B4B7BD" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                                            </svg>
                                        </el-button>
                                        <el-button type="primary" circle size="small" class="icon_btn" v-else @click="syncMaterial(scope.row)">
                                            <svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <circle cx="16" cy="16.5" r="16" fill="#A5B1D1" fill-opacity="0.08" />
                                                <path d="M22 14.5H10L14 10.5" stroke="#4475FF" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                                                <path opacity="0.5" d="M10 17.5H22L18 21.5" stroke="#4475FF" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                                            </svg>
                                        </el-button>
                                    </el-tooltip>
                                    <el-dropdown style="margin-left:12px">
                                        <el-button type="primary" circle size="small" class="icon_btn">
                                            <svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <circle cx="16" cy="16.5" r="16" fill="#A5B1D1" fill-opacity="0.08" />
                                                <path fill-rule="evenodd" clip-rule="evenodd" d="M17.5 11.5C17.5 12.3284 16.8284 13 16 13C15.1716 13 14.5 12.3284 14.5 11.5C14.5 10.6716 15.1716 10 16 10C16.8284 10 17.5 10.6716 17.5 11.5ZM16 23C16.8284 23 17.5 22.3284 17.5 21.5C17.5 20.6716 16.8284 20 16 20C15.1716 20 14.5 20.6716 14.5 21.5C14.5 22.3284 15.1716 23 16 23Z" fill="#4475FF" />
                                                <path opacity="0.5" d="M17.5 16.5C17.5 17.3284 16.8284 18 16 18C15.1716 18 14.5 17.3284 14.5 16.5C14.5 15.6716 15.1716 15 16 15C16.8284 15 17.5 15.6716 17.5 16.5Z" fill="#4475FF" />
                                            </svg>
                                        </el-button>
                                        <el-dropdown-menu slot="dropdown">
                                            <el-dropdown-item @click.native="editVedioBase(scope.row)" :disabled="scope.row.sync_status==1">
                                                <div class="flexbox flexcenter">
                                                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M3 17H17" stroke="#616C85" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                                                        <path d="M4 11.14V14H6.87461L15 5.87104L12.1302 3L4 11.14Z" stroke="#616C85" stroke-width="1.6" stroke-linejoin="round" />
                                                    </svg>
                                                    <span class="font_14 color_01" style="margin-left:5px">基础信息</span>
                                                </div>
                                            </el-dropdown-item>
                                            <el-dropdown-item @click.native="fissionVideoSz(scope.row)" :disabled='scope.row.fission_type !=0'>
                                                <div class="flexbox flexcenter">
                                                    <img src="../../assets/img/split_icon.svg" alt="">
                                                    <span class="font_14 color_01" style="margin-left:5px">裂变</span>
                                                </div>
                                            </el-dropdown-item>
                                            <el-dropdown-item @click.native="deletVideoSz(scope.row.id)" v-if="scope.row.sync_status==0">
                                                <div class="flexbox flexcenter">
                                                    <img src="../../assets/img/del_icon.svg" alt="">
                                                    <span class="font_14 color_01" style="margin-left:5px">废弃</span>
                                                </div>
                                            </el-dropdown-item>
                                            <el-dropdown-item @click.native="viewLog(scope.row)">
                                                <div class="flexbox flexcenter">
                                                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M11 17.9824L4.78571 17.9825C4.35178 17.9825 4 17.603 4 17.1349L4 3.8474C4 3.37926 4.35178 2.99978 4.78572 2.99978L15.2143 2.99978C15.6482 2.99978 16 3.37926 16 3.84741L16 10.9999" stroke="#616C85" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                                                        <path d="M7 7H13" stroke="#616C85" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                                                        <path d="M7 10H10.5" stroke="#616C85" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                                                        <path d="M12 14.5L14 13L16 14.5" stroke="#616C85" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                                                        <path d="M14 18L14 13" stroke="#616C85" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                                                    </svg>
                                                    <span class="font_14 color_01" style="margin-left:5px">日志</span>
                                                </div>
                                            </el-dropdown-item>
                                        </el-dropdown-menu>
                                    </el-dropdown>
                                </template>
                            </template>
                            <template v-else-if="scope.row.status==-1">
                                <div class="flexbox flexcenter">
                                    <el-tooltip class="item" effect="dark" content="日志" placement="top">
                                        <el-button type="primary" circle size="small" class="icon_btn" @click="viewLog(scope.row)">
                                            <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M11 18.4823L4.78571 18.4824C4.35178 18.4824 4 18.1029 4 17.6348L4 4.34728C4 3.87914 4.35178 3.49965 4.78572 3.49965L15.2143 3.49966C15.6482 3.49966 16 3.87914 16 4.34728L16 11.4998" stroke="#4475FF" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                                                <path d="M7 7.5H13" stroke="#4475FF" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                                                <path d="M7 10.5H10.5" stroke="#4475FF" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                                                <path opacity="0.5" d="M12 15L14 13.5M14 13.5L16 15M14 13.5L14 18.5" stroke="#4475FF" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                                            </svg>
                                        </el-button>
                                    </el-tooltip>
                                    <el-button type="text" disabled>已作废</el-button>
                                </div>
                            </template>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="page_box flexbox flexcenter" v-if="total>0">
                <el-pagination background layout="total, prev, pager, next,sizes" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-size="queryInfo.limit" :page-sizes="[20, 50, 100, 200]" :total="total">
                </el-pagination>
            </div>
        </div>
        <div class="picture_box" v-if="is_pic">
            <span class="close_picture" @click="closePicture()"></span>
            <img :src="imgSrc" alt="" class="picture_scale">
        </div>
        <SumbitDialog 
            class="videoList_dialog"
            width="800px"
            :dialogVisible.sync="dialogVideoData.dialogVideo"
            sumbitColor="#165DFF"
            sumbitText="添加到工作台"
            @onSubmit="saveWork">
            <div slot="title">{{dialogVideoData.VideoText}}</div>
            <div class="flexbox dialogList" v-if="dialogVideoData.list.length>0" v-loading="dialogVideoData.dialog" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
                <div class="flexbox flexcenter" v-for="(item,index) in dialogVideoData.list" style="height:323px;width:181px;margin-top:12px;position: relative;cursor:pointer;background:#000;border-radius:14px" @click="playVideo(item)">
                    <el-image style="heigth:100%;width:100%;border-radius:12px" :src="item.material + '&x-oss-process=video/snapshot,t_0,f_jpg'"  lazy>
                        <div slot="placeholder" class="image-slot">
                            加载中<span class="dot">...</span>
                        </div>
                    </el-image>
                    <video
                        controls
                        name="media"
                        style="height:0"
                        ref="videoRef"
                        @loadedmetadata="getVideoDuration(index)"
                    >
                        <source :src="item.material" type="video/mp4" />
                    </video>
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="source_play">
                        <ellipse opacity="0.4" cx="12" cy="12" rx="12" ry="12" fill="black" />
                        <path d="M17.6411 11.5965C17.9607 11.8312 17.9607 12.3087 17.6411 12.5434L9.93513 18.2031C9.54719 18.488 9.00003 18.211 9.00003 17.7297L9.00003 6.41022C9.00003 5.92889 9.54719 5.65187 9.93513 5.93679L17.6411 11.5965Z" fill="white" />
                    </svg>
                        <div class="duration video_id" style="right:56px">
                            <p>ID: {{ item.video_id }}</p>
                        </div>
                        <!-- 时长 -->
                        <div class="duration" :key="'duration-' + index">
                            <p>{{ formatTime(item.duration) }}</p>
                        </div>
                    <div class="veideo_name">
                        <p>{{ item.material_name }}</p>
                    </div>
                </div>
            </div>
            <div v-else class="flexbox flexcenter" style="height: 650px;justify-content: center;flex-direction: column;" v-loading="dialogVideoData.dialog" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
                 <svg xmlns="http://www.w3.org/2000/svg" width="99" height="105" viewBox="0 0 99 105" fill="none">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M31.132 34.2949C29.3339 34.2949 27.8761 35.7518 27.8761 37.5498V42.9757H27.9211C27.8914 43.153 27.8761 43.3342 27.8761 43.5191V86.9278C27.8761 88.7258 29.3339 90.1836 31.132 90.1836H74.6297C76.1613 90.1836 77.4859 89.1159 77.8118 87.6198L87.2478 44.2102C87.6897 42.1811 86.1437 40.2632 84.0667 40.2632H59.8905C58.3925 40.2632 57.1771 39.0489 57.1771 37.5498C57.1771 35.7518 55.7193 34.2949 53.9212 34.2949H31.132Z" fill="#4E9BEC"/>
                    <path d="M74.5406 43.3809H22.4503C20.5439 43.3809 18.9979 44.9269 18.9979 46.8332V86.9294C18.9979 88.8358 20.5439 90.3808 22.4503 90.3808H74.5406C76.447 90.3808 77.993 88.8358 77.993 86.9294V46.8332C77.993 44.9269 76.447 43.3809 74.5406 43.3809Z" fill="#DBEDFF" stroke="url(#paint0_linear_18231_36545)" stroke-width="0.392585"/>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M31.132 34.2959C29.3339 34.2959 27.8761 35.7537 27.8761 37.5518V42.9776H27.9211C27.8914 43.1549 27.8761 43.3361 27.8761 43.5211V86.9297C27.8761 88.7278 29.3339 90.1856 31.132 90.1856H74.6297C76.1613 90.1856 77.4859 89.1179 77.8118 87.6207L87.2478 44.2121C87.6897 42.1831 86.1437 40.2652 84.0667 40.2652H59.8905C58.3925 40.2652 57.1771 39.0508 57.1771 37.5518C57.1771 35.7537 55.7193 34.2959 53.9212 34.2959H31.132Z" fill="#7BBBFF"/>
                    <path d="M13.1368 50.2266H65.5169C66.8985 50.2266 68.1086 51.1607 68.4698 52.5054L77.5584 86.4123C78.0844 88.3724 76.6195 90.3005 74.6065 90.3005H22.2255C20.8439 90.3005 19.6338 89.3664 19.2726 88.0217L10.1839 54.1148C9.65887 52.1547 11.1229 50.2266 13.1368 50.2266Z" fill="#EAF4FF" stroke="url(#paint1_linear_18231_36545)" stroke-width="0.392585"/>
                    <path d="M33.8455 37.5493C33.8455 38.4484 33.1161 39.1778 32.2171 39.1778C31.318 39.1778 30.5896 38.4484 30.5896 37.5493C30.5896 36.6513 31.318 35.9219 32.2171 35.9219C33.1161 35.9219 33.8455 36.6513 33.8455 37.5493Z" fill="#EC5353"/>
                    <path d="M39.2713 37.5493C39.2713 38.4484 38.5429 39.1778 37.6439 39.1778C36.7448 39.1778 36.0155 38.4484 36.0155 37.5493C36.0155 36.6513 36.7448 35.9219 37.6439 35.9219C38.5429 35.9219 39.2713 36.6513 39.2713 37.5493Z" fill="#F2DD1D"/>
                    <path d="M44.6971 37.5493C44.6971 38.4484 43.9686 39.1778 43.0696 39.1778C42.1706 39.1778 41.4421 38.4484 41.4421 37.5493C41.4421 36.6513 42.1706 35.9219 43.0696 35.9219C43.9686 35.9219 44.6971 36.6513 44.6971 37.5493Z" fill="#38DF5D"/>
                    <path d="M33.5131 63.774C33.4029 63.1127 33.9137 62.5107 34.5837 62.5107H39.9798C40.5108 62.5107 40.9632 62.8941 41.0504 63.4174L41.774 67.7583C41.8843 68.4196 41.3744 69.0216 40.7034 69.0216H35.3073C34.7763 69.0216 34.3239 68.6382 34.2367 68.1149L33.5131 63.774Z" fill="white"/>
                    <path d="M35.1414 72.4556C35.0312 71.7933 35.5411 71.1914 36.212 71.1914H41.6081C42.1381 71.1914 42.5915 71.5748 42.6777 72.0981L43.4014 76.439C43.5116 77.1003 43.0017 77.7032 42.3308 77.7032H36.9347C36.4046 77.7032 35.9513 77.3198 35.865 76.7965L35.1414 72.4556Z" fill="white"/>
                    <path d="M44.3656 63.774C44.2554 63.1127 44.7653 62.5107 45.4362 62.5107H50.8323C51.3624 62.5107 51.8157 62.8941 51.9029 63.4174L52.6266 67.7583C52.7358 68.4196 52.2259 69.0216 51.556 69.0216H46.1599C45.6289 69.0216 45.1765 68.6382 45.0893 68.1149L44.3656 63.774Z" fill="#2D8CF0"/>
                    <path d="M45.9931 72.4556C45.8829 71.7933 46.3928 71.1914 47.0637 71.1914H52.4598C52.9908 71.1914 53.4432 71.5748 53.5304 72.0981L54.2541 76.439C54.3643 77.1003 53.8544 77.7032 53.1835 77.7032H47.7873C47.2564 77.7032 46.804 77.3198 46.7167 76.7965L45.9931 72.4556Z" fill="white"/>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M86.372 18.1572C86.372 18.1572 87.0573 19.6639 87.4426 20.9808C87.9775 22.8077 87.55 24.8847 87.4561 24.9048C86.9433 25.0169 85.2027 22.5681 85.2305 21.1313C85.2545 19.8393 86.372 18.1572 86.372 18.1572Z" fill="#FFB883"/>
                    <g filter="url(#filter0_d_18231_36545)">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M62.0281 23.0405C62.0281 23.0405 72.1983 20.629 75.7408 12.5674C77.2322 12.8981 79.8564 14.2073 86.2359 18.021C87.1273 18.553 85.241 21.1168 85.241 21.1168C85.241 21.1168 88.2113 23.7123 87.481 24.7494C83.2637 30.7446 79.8919 32.9222 76.0111 33.064C69.992 31.5899 62.0281 23.0405 62.0281 23.0405Z" fill="#FFE089"/>
                    </g>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M41.1558 39.5088C43.0986 43.4519 41.4567 48.5902 38.7175 52.7327C42.304 53.4563 48.6011 54.0668 53.5496 54.0927C53.7844 54.0937 54.4343 53.8042 54.6547 53.7774C55.9908 53.6106 56.4259 52.472 56.8247 52.0474C58.1761 49.3483 59.6732 47.2407 59.7729 44.0049C59.8246 42.3458 59.7221 40.9772 59.5659 40.4241C57.4965 39.4197 53.657 40.6398 41.1558 39.5088Z" fill="#A8E5FF"/>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M54.6567 50.9528C55.5663 51.755 54.8839 54.0601 53.1826 54.109C54.9893 54.039 55.9286 53.3317 56.5947 52.6358C57.2618 51.941 60.394 48.711 59.5563 40.4395C59.9761 47.4477 58.433 50.9595 54.6567 50.9528Z" fill="#7CC3E1"/>
                    <defs>
                        <filter id="filter0_d_18231_36545" x="62.0281" y="12.5674" width="25.5684" height="38.9459" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                        <feFlood flood-opacity="0" result="BackgroundImageFix"/>
                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
                        <feOffset dy="18.4488"/>
                        <feColorMatrix type="matrix" values="0 0 0 0 0.173316 0 0 0 0 0.377447 0 0 0 0 0.620833 0 0 0 0.272192 0"/>
                        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_18231_36545"/>
                        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_18231_36545" result="shape"/>
                        </filter>
                        <linearGradient id="paint0_linear_18231_36545" x1="48.3222" y1="46.3847" x2="71.4847" y2="95.4578" gradientUnits="userSpaceOnUse">
                        <stop stop-color="white"/>
                        <stop offset="1" stop-color="white" stop-opacity="0"/>
                        </linearGradient>
                        <linearGradient id="paint1_linear_18231_36545" x1="33.1993" y1="50.112" x2="28.8119" y2="88.6826" gradientUnits="userSpaceOnUse">
                        <stop stop-color="white"/>
                        <stop offset="1" stop-color="white" stop-opacity="0"/>
                        </linearGradient>
                    </defs>
                </svg>
                <span style="color:#ACB2BB">暂无数据，请先添加</span> 
            </div>
        </SumbitDialog>
         <!-- 工作台 -->
        <Staging  ref="workStaging"/>
        <PlayVideo />
    </div>
</template>

<script>
import Staging from '@/components/material/components/Staging';
import PlayVideo from "@/components/material/PlayVideo";
import {
    dataList,
    businessList,
    verifyList,
    channelList,
    fissionList,
    finishlList,
    yewuList,
    feiqiList,
    yushenList,
    tongbuList,
} from "../../assets/js/scheduling";
import SumbitDialog from "@/components/components/SumbitDialog"
import AddVideoSingleSz from "./AddVideoSingleSz";
import AddVideoMultiSz from "./AddVideoMultiSz";
import JustVideoSz from "./JustVideoSz";
import ViewVideoInfo from "./ViewVideoInfo";
import FissionVideoSz from "./FissionVideoSz";
import AddVideoSz from "./AddVideoSz";
import FissionRecordVideo from "./FissionRecordVideo";
import AddSchedTag from "./AddSchedTag";
// import EditShotSz from "./EditShotSz";
import EditVideoSz from "./EditVideoSz";
import EditVideoBase from "./EditVideoBase";
import SceneModel from "./SceneModel";
import DaysModel from "./DaysModel";
import HasCenter from "./HasCenter";
import ViewVideoLog from "./ViewVideoLog";

import LabelSettingDialog from "../LabelSettings/index";
export default {
    name: "",
    data() {
        return {
            dialogVideoData:{
                dialog:false,
                VideoText:"",
                dialogVideo:false,
                list:[]
            },
            ModuleName:'videoszlist',
            process: 0,
            is_pic: false,
            imgSrc: "",
            queryInfo: {
                userInfo: {},
                year: "",
                week: "",
                page: 1,
                limit: 20,
                query: "",
                closing_date: [],
                editor_uid: [],
                centre_uid: [],
                centre_name: "",
                channel: [],
                brand_name: "",
                product_name: "",
                onlyme: 1,
                field: "closing_date",
                order: "asc",
                executor_uid: [],
                verify_status: [],
                fission_type: [],
                business_scene: [],
                id: [],
                is_all: 0,
                material_finish: "",
                tag: [],
                status: "",
                quality_status: -1,
                date_defined: 0,
                date: [],
                sync_status:""
            },
            loading: false,
            vd_url: "",
            video_status: false,
            yearData: new Date(),
            optimiList: "", //优化师列表
            tag_list: [],
            dataList: [], //日期列表
            fissionList: [],
            businessList: [],
            verifyList: [],
            channelList: [],
            finishlList: [],
            feiqiList: [],
            yushenList: [],
            tongbuList:[],
            executorQuery: "", //执行人搜索
            centreQuery: "", //编导搜索
            editorQuery: "", //剪辑搜索
            business_text: [], //已选业务场景
            tabindex: 1,
            showrank: true,
            yewuList: [],
            yewuValue: [],
            addrank: [
                {
                    check: false,
                    name: "业务场景",
                    value: "business_scene",
                    type: 2,
                },
                {
                    check: false,
                    name: "审核状态",
                    value: "verify_status",
                    type: 2,
                },
                {
                    check: false,
                    name: "平台",
                    value: "channel",
                    type: 2,
                },
                {
                    check: false,
                    name: "核心创意人",
                    value: "centre_name",
                    type: 1,
                },
                {
                    check: false,
                    name: "上传状态",
                    value: "material_finish",
                    type: 1,
                },
                {
                    check: false,
                    name: "标签",
                    value: "tag",
                    type: 2,
                },
                {
                    check: false,
                    name: "废弃状态",
                    value: "status",
                    type: 1,
                },
                {
                    check: false,
                    name: "预审状态",
                    value: "quality_status",
                    type: 1,
                },
                {
                    check: false,
                    name: "同步状态",
                    value: "sync_status",
                    type: 1,
                },
            ], // 添加筛选
            currActive: 1,
            total: 1,
            setpage: 1,
            tableData: [],
            hasSelect: [],
            pickerOptions: {
                shortcuts: [
                    {
                        text: "最近一周",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 7
                            );
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "最近一个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 30
                            );
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "最近三个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 90
                            );
                            picker.$emit("pick", [start, end]);
                        },
                    },
                ],
            },
        };
    },
    created() {
        // let time_week = this.dayjs("2023-08-27").weekday(-7).day(6).week();
        // console.log(time_week);
        // let time_week2 = this.getYearWeek('2023-08-27')
        // console.log(time_week2);
        // return
        this.dataList = dataList;
        this.businessList = businessList;
        this.channelList = channelList;
        this.verifyList = verifyList;
        this.fissionList = fissionList;
        this.finishlList = finishlList;
        this.yewuList = yewuList;
        this.feiqiList = feiqiList;
        this.yushenList = yushenList;
        this.tongbuList = tongbuList;
        this.userInfo = JSON.parse(window.localStorage.getItem("userinfo"));
        let dayTime = this.$route.query.day
            ? JSON.parse(this.$route.query.day)
            : "";
        this.yearData = dayTime ? new Date(dayTime) : new Date();
        // this.queryInfo.week = dayTime
        //     ? this.getYearWeek(new Date(dayTime))
        //     : this.getYearWeek(new Date());
        this.queryInfo.week = dayTime
            ? this.dayjs(new Date(dayTime)).week()
            : this.dayjs().week();
        this.queryInfo.year = dayTime
            ? this.dateFormat("YYYY", new Date(dayTime))
            : this.dateFormat("YYYY", new Date());
        let aobj = JSON.parse(window.sessionStorage.getItem("schedulingVedio"));
        if (aobj) {
            this.queryInfo.year = aobj.year;
            this.queryInfo.week = aobj.week;
            this.queryInfo.page = aobj.page;
            this.yearData = aobj.yearData;
        }
        console.log(this.queryInfo.week);
        this.getWeekTime();
        this.getDataList(this.queryInfo.page);
        this.getOptimization();
        this.getTagList();
    },
    beforeDestroy() {
        window.sessionStorage.removeItem("schedulingVedio");
    },
    methods: {
    playVideo(item){
        const attr = {
                dialogVsb: true,
                url: item.material,
            };
        this.$bus.emit("playVideo", attr);
        
    },
    // 保存到工作台
    async saveWork(){
        const { data: res } = await this.$http.post(
                "adminapi/materialfj/workspaceMaterialAdd",
                {   
                   workspace_id:0,
                   video_id:this.dialogVideoData.list.map(e=>e.video_id)
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.$message.success('添加成功');
                this.dialogVideoData.dialogVideo = false;
            }
    },
        // 获取视频时长
    getVideoDuration(index) {
      const videoElement = this.$refs.videoRef[index];
      this.dialogVideoData.list[index].duration = videoElement.duration;
    },

    // 视频时长转换 mm:ss
    formatTime(seconds) {
      const minutes = Math.floor(seconds / 60);
      const remainingSeconds = Math.floor(seconds % 60);

      const formattedMinutes = String(minutes);
      const formattedSeconds = String(remainingSeconds).padStart(2, "0");

      return `${formattedMinutes}:${formattedSeconds}`;
    },
      async openVideoDialog(item,type){
          this.$nextTick(()=>{
              if(type != 'wait'){
                    document.querySelectorAll('.videoList_dialog .footer_btn')[0].innerText = "关闭"
                    document.querySelectorAll('.videoList_dialog .footer_btn')[1].style.display = "none"
                }else{
                    document.querySelectorAll('.videoList_dialog .footer_btn')[0].innerText = "取消"
                    document.querySelectorAll('.videoList_dialog .footer_btn')[1].style.display = "flex"
                }
            })
            this.dialogVideoData.list = [];
            this.dialogVideoData.dialog= true;
            this.dialogVideoData.dialogVideo = true;
            this.dialogVideoData.VideoText = type== "wait"?"待用分镜素材":"应用分镜素材";
            const { data: res } = await this.$http.post(
                "adminapi/demandsz/videoShotList",
                {   
                    id:item.id,
                    shot_type:type,
                    page:1,
                    limit:999
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.dialogVideoData.list = res.data.list;
                this.dialogVideoData.dialog = false;
            }
        },
        // 禁止选择
        selectEnable(row, rowIndex) {
            if (row.sync_status == 1 || row.closing_date == 8) {
                return false;
            } else {
                return true;
            }
        },

        // 批量选择
        handleSelectionChange(val) {
            this.hasSelect = val;
        },

        // 关闭批量选择
        closeCheck() {
            this.hasSelect = [];
            this.$refs.multipleTable.clearSelection();
        },

        // 修改创意人
        editCenter() {
            this.$refs.centerRef.dialogVisible = true;
            this.$refs.centerRef.hasSelect = this.hasSelect;
            this.$refs.centerRef.getCentreList();
            this.$refs.centerRef.getClipList();
        },

        getWeekTime() {
            const one_day = 86400000;
            const date = new Date();
            const day = date.getDay() + 1;
            date.setHours(0);
            date.setMinutes(0);
            date.setSeconds(0);
            date.setMilliseconds(0);
            const week_start_time = date.getTime() - (day - 1) * one_day;
            const week_end_time = date.getTime() + (7 - day) * one_day;
            let start_time = this.formatNowDate(week_start_time);
            let end_time = this.formatNowDate(week_end_time);
            this.queryInfo.date = [start_time, end_time];
        },

        formatNowDate(time) {
            let date = new Date(time);
            var myyear = date.getFullYear();
            var mymonth =
                date.getMonth() + 1 < 10
                    ? "0" + (date.getMonth() + 1)
                    : date.getMonth() + 1;
            var myweekday =
                date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
            let day_start = myyear + "-" + mymonth + "-" + myweekday;
            return day_start;
        },
        //获取列表
        async getDataList(page) {
            let that = this;
            if (that.source) {
                that.source();
            }
            this.queryInfo.page = page;
            if (this.userInfo.id == 10000) {
                this.queryInfo.onlyme = 0;
            }
            this.loading = true;
            const { data: res } = await this.$http.post(
                "adminapi/demandsz/videoList",
                this.queryInfo,
                {
                    cancelToken: new axios.CancelToken(function executor(c) {
                        that.source = c;
                    }),
                }
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                for (let i in res.data.list) {
                    res.data.list[i].remarkshow = false;
                }
                this.tableData = res.data.list;
                this.total = res.data.count;
                this.process = res.data.process;
                this.setSessionStorage();
            }
        },

        // 筛选
        filteredData(query, list, name) {
            var list = list,
                query = query;

            if (!query) {
                return list;
            }
            query = query.trim();

            list = list.filter(function (item) {
                if (item[name].indexOf(query) !== -1) {
                    return item;
                }
            });
            return list;
        },

        //获取标签列表
        async getTagList(query) {
            const { data: res } = await this.$http.post(
                "adminapi/material/tagList",
                {
                    page: 1,
                    limit: 0,
                    query: query ?query :undefined
                }
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.tag_list = res.data.list;
            }
        },

        // 获取优化师列表
        async getOptimization() {
            const { data: res } = await this.$http.post(
                "adminapi/company/szClipperList"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.optimiList = res.data;
            }
        },

        // 视频播放
        showVideo(url) {
            this.vd_url = url;
            this.video_status = true;
        },
        // 视频停止
        hideVideo() {
            this.vd_url = "";
            this.video_status = false;
        },

        getData() {
            // this.queryInfo.week = this.getYearWeek(new Date(this.yearData));
            this.queryInfo.week = this.dayjs(this.yearData).week();
            this.queryInfo.year = this.dateFormat(
                "YYYY",
                new Date(this.yearData)
            );
            this.getDataList(1);
        },

        getYearWeek(date) {
            date = this.dateFormat("YYYY-mm-dd", date);
            date = new Date(date);
            let d = "";
            var date2 = new Date(date.getFullYear(), 0, 1);
            var day1 = date.getDay();
            if (day1 == 0) day1 = 7;
            var day2 = date2.getDay();
            if (day2 == 0) day2 = 7;
            d = Math.round(
                (date.getTime() -
                    date2.getTime() +
                    (day2 - day1) * (24 * 60 * 60 * 1000)) /
                    86400000
            );
            return Math.ceil(d / 7);
        },

        // 日期格式化
        dateFormat(fmt, date) {
            let ret;
            const opt = {
                "Y+": date.getFullYear().toString(), // 年
                "m+": (date.getMonth() + 1).toString(), // 月
                "d+": date.getDate().toString(), // 日
                "H+": date.getHours().toString(), // 时
                "M+": date.getMinutes().toString(), // 分
                "S+": date.getSeconds().toString(), // 秒
                // 有其他格式化字符需求可以继续添加，必须转化成字符串
            };
            for (let k in opt) {
                ret = new RegExp("(" + k + ")").exec(fmt);
                if (ret) {
                    fmt = fmt.replace(
                        ret[1],
                        ret[1].length == 1
                            ? opt[k]
                            : opt[k].padStart(ret[1].length, "0")
                    );
                }
            }
            return fmt;
        },

        // 清空筛选
        clearQuery(name, type) {
            if (type == 1) {
                this.queryInfo[name] = "";
            } else {
                this.queryInfo[name] = [];
            }
            this.getDataList(1);
        },

        // 业务场景平台筛选
        selectYewu() {
            this.queryInfo.business_scene = this.repeatFindScene(
                this.yewuValue,
                this.yewuList,
                "id",
                "scene"
            );
            this.queryInfo.channel = this.repeatFindChannel(
                this.yewuValue,
                this.yewuList,
                "id",
                "channel"
            );
            this.getDataList(1);
        },

        // 清除业务场景平台
        clearChannl() {
            this.yewuValue = [];
            this.queryInfo.business_scene = [];
            this.queryInfo.channel = [];
            this.getDataList(1);
        },

        repeatFind(b, a, id, name) {
            let arr = [];
            for (let i in b) {
                for (let o in a) {
                    if (b[i] == a[o][id]) {
                        arr.push(a[o][name]);
                    }
                }
            }
            return arr.toString();
        },

        repeatSinge(a, b, id, name) {
            let text = a
                .filter((item) => {
                    return item[id] == b;
                })
                .map((item) => {
                    return item[name];
                })
                .toString();
            return text;
        },

        repeatFindScene(b, a, id, scene) {
            let arr = [];
            for (let i in b) {
                for (let o in a) {
                    if (b[i] == a[o][id]) {
                        arr.push(a[o][scene]);
                    }
                }
            }
            return [...new Set(arr)];
        },

        repeatFindChannel(b, a, id, channel) {
            let arr = [];
            for (let i in b) {
                for (let o in a) {
                    if (b[i] == a[o][id]) {
                        arr.push(a[o][channel]);
                    }
                }
            }
            return [...new Set(arr)];
        },

        // 创建单需求
        addVideoSingleSz() {
            const attr = {
                dialogVsb: true,
                week: this.queryInfo.week,
                year: this.queryInfo.year,
            };
            this.$bus.emit("addVideoSingleSz", attr);
        },

        // 创建多需求
        addVideoMultiSz() {
            const attr = {
                dialogVsb: true,
                week: this.queryInfo.week,
                year: this.queryInfo.year,
            };
            this.$bus.emit("addVideoMultiSz", attr);
        },

        // 查看需求信息
        viewVideoInfo(info) {
            const attr = {
                dialogVsb: true,
                info: info,
            };
            this.$bus.emit("viewVideoInfo", attr);
        },

        // 添加素材
        addVideoSz(row) {
            const attr = {
                id: row.id,
                centre_uid: row.centre_uid,
                dialogVsb: true,
            };
            this.$bus.emit("addVideoSz", attr);
        },

        // 点击放大图片
        selectPicture(e) {
            if (e.srcElement.localName == "img") {
                this.is_pic = true;
                this.imgSrc = e.srcElement.currentSrc;
            }
        },

        closePicture() {
            this.is_pic = false;
            this.imgSrc = "";
        },

        // 调整
        justVideoSz(row) {
            const attr = {
                week: this.queryInfo.week,
                year: this.queryInfo.year,
                brand_name: row.brand_name,
                product_name: row.product_name,
                business_scene: row.business_scene,
                editor_uid: row.editor_uid,
                closing_date: row.closing_date,
                description: row.description,
                centre_uid: row.centre_uid,
                id: row.id,
                brand_id: row.brand_id,
                product_id: row.product_id,
                material_finish: row.material_finish,
                dialogVsb: true,
            };
            this.$bus.emit("justVideoSz", attr);
        },

        // 上传视频
        eidtVideoSz(row) {
            const attr = {
                auto_get_photographer:row.auto_get_photographer,
                brand_name: row.brand_name,
                product_name: row.product_name,
                business_scene: row.business_scene,
                photographer_uid: row.photographer_uid.map((item) => {
                    if(item.id){
                        return item.id;
                    }else{
                        return item;
                    }
                }),
                editor_uid: row.editor_uid,
                centre_uid: row.centre_uid,
                create_type: row.create_type,
                brand_id: row.brand_id,
                product_id: row.product_id,
                id: row.id,
                material_finish: row.material_finish,
                material: row.material.length > 0 ? row.material[0].url : "",
                dialogVsb: true,
            };
            this.$bus.emit("editVideoSz", attr);
        },

        // 编辑基本信息
        editVedioBase(row) {
            this.$refs.baseRef.dialogVisible = true;
            this.$refs.baseRef.editVideoBaseSzForm.id = row.id;
            this.$refs.baseRef.editVideoBaseSzForm.closing_date =
                row.closing_date;
            this.$refs.baseRef.editVideoBaseSzForm.description =
                row.description;
        },

        // 编辑拍摄
        editShotSz(row) {
            this.$refs.shotRef.dialogVisible = true;
            this.$refs.shotRef.material_finish = row.material_finish;
            this.$refs.shotRef.shotSzForm.id = row.id;
            this.$refs.shotRef.shotSzForm.photographer_uid =
                row.photographer_uid.map((item) => {
                    return item.id;
                });
            this.$refs.shotRef.getShotList();
        },

        // 裂变
        fissionVideoSz(row) {
            const attr = {
                brand_name: row.brand_name,
                product_name: row.product_name,
                business_scene: row.business_scene,
                id: row.id,
                dialogVsb: true,
            };
            this.$bus.emit("fissionVideoSz", attr);
        },

        // 作废
        deletVideoSz(row) {
            let id = row;
            this.$confirm("请问是否要作废", "作废", {
                confirmButtonText: "确认",
                cancelButtonText: "取消",
            })
                .then(async () => {
                    const { data: res } = await this.$http.post(
                        "adminapi/demandsz/videoCancel",
                        {
                            id: id,
                        }
                    );
                    if (res.code !== 200) {
                        this.$message.error(res.msg);
                        return;
                    } else {
                        this.$message({
                            type: "success",
                            message: "作废成功",
                        });
                        this.getDataList(this.queryInfo.page);
                        this.closeCheck();
                    }
                })
                .catch(() => {});
        },

        // 删除筛选
        deletRank(index, name, type) {
            let index2 = this.addrank.findIndex((item) => item.value == name);
            this.addrank[index2].check = false;
            if (type == 1) {
                this.queryInfo[name] = "";
            } else if (type == 2) {
                this.queryInfo[name] = [];
            } else if (type == 3) {
                this.yewuValue = [];
                this.queryInfo.business_scene = [];
                this.queryInfo.channel = [];
            }
            this.getDataList(1);
        },
        changeRank(item, index) {
            if (!item.check) {
                if (item.type == 1) {
                    this.queryInfo[item.value] = "";
                } else if (item.type == 2) {
                    this.queryInfo[item.value] = [];
                } else if (item.type == 3) {
                    this.yewuValue = [];
                    this.queryInfo.business_scene = [];
                    this.queryInfo.channel = [];
                }
                this.getDataList(1);
            }
        },

        // 备注
        showRemark(index) {
            this.tableData[index].remarkshow = true;
        },
        async editRemark(row, index) {
            const { data: res } = await this.$http.post(
                "adminapi/demandsz/videoRemark",
                {
                    id: row.id,
                    remark: row.remark,
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.$message({
                    message: "修改成功",
                    type: "success",
                });
                this.tableData[index].remarkshow = false;
                this.getDataList(this.queryInfo.page);
            }
        },

        // 同步到素材库
        syncMaterial(row) {
            const photo = row.photographer_uid
                .map((item) => {
                    return item.nickname;
                })
                .toString();
            let text = `<div class='flexbox flexcenter flexbetween font_14' style='height:48px;margin-top:12px;padding:0 12px;background:#F8F9FB;border-radius:6px'><span class='color_02'>拍摄人</span><span class='color_01'>${
                photo ? photo : "暂无"
            }</span></div>`;
            this.$confirm(
                `确定要同步素材库吗？同步后将无法对需求进行修改${text}`,
                "同步素材库",
                {
                    confirmButtonText: "确认",
                    cancelButtonText: "取消",
                    dangerouslyUseHTMLString: true,
                }
            )
                .then(async () => {
                    this.loading = true;
                    const { data: res } = await this.$http.post(
                        "adminapi/demandsz/videoSyncMaterial",
                        {
                            sch_id: row.id,
                        }
                    );
                    if (res.code !== 200) {
                        this.loading = false;
                        this.$message({
                            dangerouslyUseHTMLString: true,
                            type: "error",
                            message: res.msg,
                        });
                        return;
                    } else {
                        this.loading = false;
                        this.$message({
                            type: "success",
                            message: "同步成功",
                        });
                        this.getDataList(this.queryInfo.page);
                    }
                })
                .catch(() => {});
        },

        // 复制
        copy(text) {
            let url = text;
            let oInput = document.createElement("input");
            oInput.value = url;
            document.body.appendChild(oInput);
            oInput.select(); // 选择对象;
            document.execCommand("Copy"); // 执行浏览器复制命令
            this.$message({
                message: "复制成功",
                type: "success",
            });
            oInput.remove();
        },

        // 跳转
        switchTab(path) {
            this.$router.push({
                path: path,
                query: {
                    day: JSON.stringify(this.yearData),
                },
            });
        },

        // 裂变记录
        fissionRecordVideo(row) {
            const attr = {
                fission_type: row.fission_type,
                id: row.id,
                dialogVsb: true,
            };
            this.$bus.emit("fissionRecordVideo", attr);
        },

        // 剪辑素材详情
        videoDetailsSz(id) {
            let routeUrl = this.$router.resolve({
                path: "/videodetailssz",
                query: {
                    id: id,
                },
            });
            window.open(routeUrl.href, "_blank");
        },

        // 添加标签
        addMaterialTag(item, type) {
             this.getTagList();
             this.$refs.labelSettingDialog.openDialog();
             this.$refs.labelSettingDialog.addMaterialTagForm.id = item.id;
             this.$refs.labelSettingDialog.selectTag(this.tag_list[0]) 
             this.$refs.labelSettingDialog.tagpid = item.tag
            // this.$refs.tagRef.dialogVisible = true;
            // this.$refs.tagRef.type = type;
            // this.$refs.tagRef.has_tag = JSON.parse(JSON.stringify(item.tag));
            // this.$refs.tagRef.addMaterialTagForm.id = item.id;
            // this.$refs.tagRef.addMaterialTagForm.tag = item.tag.map((it) => {
                // return it.id;
            // });
        },

        // 日志
        viewLog(row) {
            this.$refs.log_ref.getData(row);
        },

        // 排序
        sortFun(val) {
            this.queryInfo.order = val;
            this.getDataList(1);
        },

        // 关闭原需求
        tagClose() {
            this.queryInfo.id = [];
            this.queryInfo.is_all = 0;
            this.queryInfo.year = this.dateFormat("YYYY", new Date());
            // this.queryInfo.week = this.getYearWeek(new Date());
            this.queryInfo.week = this.dayjs().week();
            this.yearData = new Date();
            this.setSessionStorage();
            this.getDataList(1);
        },

        // 重置
        resetFun() {
            this.queryInfo.query = "";
            this.queryInfo.closing_date = [];
            this.queryInfo.centre_uid = [];
            this.queryInfo.channel = [];
            this.queryInfo.brand_name = "";
            this.queryInfo.product_name = "";
            this.queryInfo.field = "closing_date";
            this.queryInfo.order = "asc";
            this.queryInfo.onlyme = 0;
            this.queryInfo.executor_uid = [];
            this.queryInfo.editor_uid = [];
            this.queryInfo.verify_status = [];
            this.queryInfo.fission_type = [];
            this.queryInfo.business_scene = [];
            this.queryInfo.tag = [];
            this.queryInfo.material_finish = "";
            this.queryInfo.status = "";
            this.queryInfo.quality_status = -1;
            this.queryInfo.id = [];
            this.executorQuery = "";
            this.centreQuery = "";
            this.editorQuery = "";
            this.yewuValue = [];
            this.business_text = [];
            this.queryInfo.year = this.dateFormat("YYYY", new Date());
            // this.queryInfo.week = this.getYearWeek(new Date());
            this.queryInfo.week = this.dayjs().week();
            this.yearData = new Date();
            this.setSessionStorage();
            this.getDataList(1);
        },

        // 每页显示多少条数据
        handleSizeChange(val) {
            this.queryInfo.limit = val;
            this.getDataList(1);
        },
        // 当前页切换
        handleCurrentChange(val) {
            this.getDataList(val);
        },

        setSessionStorage() {
            let info = {
                year: this.queryInfo.year,
                week: this.queryInfo.week,
                page: this.queryInfo.page,
                yearData: this.yearData,
            };
            window.sessionStorage.setItem(
                "schedulingVedio",
                JSON.stringify(info)
            );
        },
    },
    components: {
        AddVideoSingleSz,
        AddVideoMultiSz,
        JustVideoSz,
        ViewVideoInfo,
        FissionVideoSz,
        AddVideoSz,
        FissionRecordVideo,
        AddSchedTag,
        // EditShotSz,
        EditVideoSz,
        EditVideoBase,
        SceneModel,
        DaysModel,
        HasCenter,
        ViewVideoLog,
        LabelSettingDialog,
        SumbitDialog,
        Staging,
        PlayVideo
    },
};
</script>


<style scoped>
/* /deep/ .com_table{
    height:calc(100vh - 389px)
}  */
.videoSzListBox{
    position: relative;
}
>>> .work_btn{
    right: 0 !important;
}
>>>.promptDialog .el-dialog__header.el-dialog__header{
    height: 56px !important;
    border-bottom: 1px solid #E8EAEC !important;
}
>>>.promptDialog .el-dialog__body{
    overflow: auto;
}
.source_play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.image-slot{
    height: 323px;
    width: 181px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dialogList{
    flex-wrap:wrap;
    height: 650px;
    gap: 12px;
}
.dialogList div:last-child{
    /* margin-right: auto; */
}

.duration {
    border-radius:  4px;
    padding: 0 4px;
    background: rgba(0, 0, 0, 0.40);
    color: #fff;
    position: absolute;
    right: 12px;
    top: 12px;
}
.veideo_name{
    position: absolute;
    bottom: 0;
    border-radius: 0 0 12px 12px;
    border: 1px solid #E8EAEC;
    background: #FFF;
    color: #191B1E;
}
.veideo_name p {
    overflow: hidden;
    text-overflow: ellipsis;
    width: 157px;
    font-weight: 600;
    white-space: pre-wrap;
    padding: 6px 12px 3px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.vide_num{
    justify-content: center;
    cursor: pointer;
    height: 24px;
    width: 48px;
    border-radius: 2px;
    background: rgba(165, 177, 209, 0.10);
    color: #4475FF;
}
.sch_tab {
    height: 71px;
    font-size: 16px;
    color: #616c85;
    line-height: 71px;
    margin-right: 20px;
    position: relative;
    cursor: pointer;
}
.sch_tab::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background-color: #4475ff;
    transition: all 0.3s;
    transform: scaleX(0);
}
.sch_tab.active {
    font-weight: bold;
    color: #17233d;
}
.sch_tab.active::after {
    transform: scaleX(1);
}

.remark_hover .icon_btn {
    display: none;
}
.remark_hover:hover .icon_btn {
    display: flex;
    margin-left: 5px;
}
.picture_box {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 999999;
    top: 0;
    left: 0;
}
.close_picture {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1;
}
.picture_scale {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    max-height: 100%;
    max-width: 1200px;
    margin: auto;
    z-index: 2;
}
.tag_context {
    max-width: 200px;
    box-sizing: border-box;
    padding: 0 8px;
    height: 26px;
    line-height: 26px;
    border: 1px solid #ebebeb;
    border-radius: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #616c85;
}
</style>
<style>
.role_icon {
    transform: rotate(-90deg);
}
.is_me .el-radio-button--mini .el-radio-button__inner {
    padding: 5px 15px;
}
</style>

